<div id="sidebar-nav" class="sidebar" style="padding-top:0; margin-top:0;">
    <div class="sidebar-scroll" style="padding-top:0; margin-top:0;">
        <nav style="padding-top:0; margin-top:0;">
            <ul class="nav" style="padding-top:0; margin-top:0;">
<!--                <li>-->
<!--                    <a href="index.html">-->
<!--                        <i class="iconfont icon-shouye"></i>-->
<!--                        <span>工作台</span>-->
<!--                    </a>-->
<!--                </li>-->
                <?php foreach ($menus[0]['menu'] as $menu): ?>
                <li class="menu-item <?=isset($menu['children'])?'has-sub':''?> <?=$menu['active']?'active':''?>">
                    <a href="<?=isset($menu['children'])?'#'.$menu['id']:$menu['url']?>" data-toggle="collapse" class="menu-link <?=$menu['active']?'active':'collapsed'?>" <?=!isset($menu['children'])?' data-tab-title="'.$menu['name'].'"':''?>>
                        <i class="iconfont <?= $menu['icon'] ?>"></i>
                        <span><?= $menu['name'] ?></span>
                        <?php if (isset($menu['children'])): ?>
                        <i class="icon-submenu iconfont icon-rightarrow font12"></i>
                        <?php endif; ?>
                    </a>
                    <? if (isset($menu['children'])): ?>
                    <div id="<?= $menu['id'] ?>" class="collapse submenu<?=$menu['active']?' in':''?>">
                        <ul class="nav">
                            <?php foreach ($menu['children'] as $child): ?>
                            <li class="submenu-item <?=$child['active']?'active':''?>">
                                <a href="<?=$child['url']?>" class="submenu-link <?=$child['active']?'active':''?>" data-tab-title="<?=$child['name']?>">
                                    <i class="iconfont icon-dot" style="font-size: 12px; margin-right: 8px;"></i>
                                    <?=$child['name']?>
                                </a>
                            </li>
                            <? endforeach; ?>
                        </ul>
                    </div>
                    <?php endif; ?>
                </li>
                <? endforeach; ?>
                <!--<li>
                    <a href="#order" data-toggle="collapse" class="collapsed">
                        <i class="iconfont icon-dingdan"></i>
                        <span>订单管理</span>
                        <i class="icon-submenu iconfont icon-rightarrow font12"></i>
                    </a>
                    <div id="order" class="collapse ">
                        <ul class="nav">
                            <li>
                                <a href="#" class="active">会员订单</a>
                            </li>
                            <li>
                                <a href="#" class="">B端订单</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#business" data-toggle="collapse" class="collapsed">
                        <i class="iconfont icon-dianpu"></i>
                        <span>B端管理</span>
                        <i class="icon-submenu iconfont icon-rightarrow font12"></i>
                    </a>
                    <div id="business" class="collapse ">
                        <ul class="nav">
                            <li>
                                <a href="#" class="">B端列表</a>
                            </li>
                            <li>
                                <a href="#" class="">信用明细</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#user" data-toggle="collapse" class="collapsed">
                        <i class="iconfont icon-yonghu"></i>
                        <span>会员管理</span>
                        <i class="icon-submenu iconfont icon-rightarrow font12"></i>
                    </a>
                    <div id="user" class="collapse ">
                        <ul class="nav">
                            <li>
                                <a href="#" class="">会员列表</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="index.html" class="">
                        <i class="iconfont icon-baobiaozhongxin"></i>
                        <span>财务报表</span>
                    </a>
                </li>
                <li>
                    <a href="#activity" data-toggle="collapse" class="collapsed">
                        <i class="iconfont icon-cuxiao"></i>
                        <span>营销管理</span>
                        <i class="icon-submenu iconfont icon-rightarrow font12"></i>
                    </a>
                    <div id="activity" class="collapse ">
                        <ul class="nav">
                            <li>
                                <a href="#" class="">营销列表</a>
                            </li>
                        </ul>
                    </div>
                </li>
                <li>
                    <a href="#sys" data-toggle="collapse" class="collapsed">
                        <i class="iconfont icon-xitongguanli"></i>
                        <span>oem管理</span>
                        <i class="icon-submenu iconfont icon-rightarrow font12"></i>
                    </a>
                    <div id="sys" class="collapse ">
                        <ul class="nav">
                            <li>
                                <a href="#" class="">商城配置</a>
                            </li>
                            <li>
                                <a href="#" class="">导航管理</a>
                            </li>
                            <li>
                                <a href="#" class="">商城公告</a>
                            </li>
                            <li>
                                <a href="#" class="">权限设置</a>
                            </li>
                            <li>
                                <a href="#" class="">日志管理</a>
                            </li>
                        </ul>
                    </div>
                </li>-->
            </ul>
        </nav>
    </div>
</div>

<style>
/* 美化侧边栏样式 */
.sidebar {
    transition: all 0.3s ease !important;
    background-color: #fff !important;
    box-shadow: 1px 0 5px rgba(0,0,0,0.05) !important;
}

/* 移除可能存在的深色背景样式 */
.sidebar .nav > li,
.sidebar .nav > li > a,
.sidebar .nav > li > a[data-toggle="collapse"] {
    background-color: transparent !important;
}

/* 新添加的菜单类样式 */
.sidebar .nav > li.menu-item {
    background-color: transparent !important;
    margin-bottom: 2px !important;
}

.sidebar .nav > li.menu-item > a.menu-link {
    background-color: transparent !important;
    color: #5f6368 !important;
    border-left: 3px solid transparent !important;
}

.sidebar .nav > li.menu-item > a.menu-link:hover,
.sidebar .nav > li.menu-item > a.menu-link.active {
    background-color: rgba(74, 137, 220, 0.05) !important;
    color: #4a89dc !important;
    border-left-color: #4a89dc !important;
}

.sidebar .nav > li.menu-item > div.submenu {
    background-color: transparent !important;
}

.sidebar .nav > li.menu-item > div.submenu > ul.nav {
    background-color: #f9fafc !important;
}

.sidebar .nav > li.menu-item > div.submenu > ul.nav > li.submenu-item {
    background-color: transparent !important;
}

.sidebar .nav > li.menu-item > div.submenu > ul.nav > li.submenu-item > a.submenu-link {
    background-color: transparent !important;
    padding: 10px 15px 10px 40px !important;
    color: #5f6368 !important;
    border-left: 3px solid transparent !important;
}

.sidebar .nav > li.menu-item > div.submenu > ul.nav > li.submenu-item > a.submenu-link:hover,
.sidebar .nav > li.menu-item > div.submenu > ul.nav > li.submenu-item > a.submenu-link.active {
    background-color: rgba(74, 137, 220, 0.05) !important;
    color: #4a89dc !important;
    border-left-color: #4a89dc !important;
}

/* 确保所有菜单项具有相同的基本样式 */
.sidebar .nav > li > a {
    color: #5f6368 !important;
    border-left: 3px solid transparent !important;
    padding: 12px 15px !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
}

.sidebar .nav > li > a:hover,
.sidebar .nav > li > a.active {
    color: #4a89dc !important;
    background-color: rgba(74, 137, 220, 0.05) !important;
    border-left-color: #4a89dc !important;
}

/* 修复统计管理等深色菜单项 - 使用更强的选择器 */
.sidebar .nav > li.active,
.sidebar .nav > li.active > a,
.sidebar .nav > li > a.collapsed,
.sidebar .nav > li > a:not(.collapsed),
.sidebar .nav > li[class*="statistics"],
.sidebar .nav > li[class*="tongji"],
.sidebar .nav > li > a[href*="statistics"],
.sidebar .nav > li > a[href*="tongji"] {
    background-color: transparent !important;
}

/* 高亮的菜单项样式 */
.sidebar .nav > li > a.active,
.sidebar .nav > li.active > a {
    color: #4a89dc !important;
    background-color: rgba(74, 137, 220, 0.05) !important;
    border-left-color: #4a89dc !important;
}

.sidebar .nav > li > a > i:not(.icon-submenu) {
    margin-right: 10px !important;
    font-size: 16px !important;
    width: 20px !important;
    text-align: center !important;
}

.sidebar .nav > li > a > .icon-submenu {
    float: right !important;
    line-height: 20px !important;
    transition: transform 0.3s ease !important;
}

.sidebar .nav > li > a:not(.collapsed) > .icon-submenu {
    transform: rotate(90deg) !important;
}

.sidebar .nav > li > div > ul.nav {
    padding-left: 0 !important;
    background-color: #f9fafc !important;
}

.sidebar .nav > li > div > ul.nav > li > a {
    padding: 10px 15px 10px 40px !important;
    color: #5f6368 !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important;
    background-color: transparent !important;
}

.sidebar .nav > li > div > ul.nav > li > a:hover,
.sidebar .nav > li > div > ul.nav > li > a.active {
    color: #4a89dc !important;
    background-color: rgba(74, 137, 220, 0.05) !important;
    border-left-color: #4a89dc !important;
}

.sidebar .nav > li > div > ul.nav > li > a > i.icon-dot {
    color: #aaa !important;
}

.sidebar .nav > li > div > ul.nav > li > a:hover > i.icon-dot,
.sidebar .nav > li > div > ul.nav > li > a.active > i.icon-dot {
    color: #4a89dc !important;
}

/* 响应式侧边栏折叠 */
body.sidebar-collapse .sidebar {
    width: 70px !important;
}

body.sidebar-collapse .sidebar .nav > li > a > span,
body.sidebar-collapse .sidebar .nav > li > a > i.icon-submenu {
    display: none !important;
}

body.sidebar-collapse .sidebar .nav > li > a > i:not(.icon-submenu) {
    margin: 0 !important;
    font-size: 18px !important;
    width: 100% !important;
    text-align: center !important;
}

body.sidebar-collapse .sidebar .nav > li > div {
    display: none !important;
}

/* 增加额外样式覆盖不和谐的深色背景 */
.sidebar .nav > li,
.sidebar .nav > li.menu-item,
.sidebar .nav > li.has-sub,
.sidebar .nav > li > a, 
.sidebar .nav > li > a[href="#tongji"], 
.sidebar .nav > li > a[href*="tongji"],
.sidebar .nav > li > a[href*="statistic"] {
    background-color: transparent !important;
}
</style>